﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="进度条.aspx.cs" Inherits="WebAvalon.View.进度条" %>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="../Scripts/dist/avalon.js"></script>
    <script src="http://cdn.bootcss.com/avalon.js/2.0s/avalon.min.js"></script>
    <script>
        var vm = avalon.define({
            $id: "test",
            percent: 0
        })
        var a = true
        var id = setInterval(function () {
            if (a) {
                if (vm.percent < 100) {
                    vm.percent++
                } else {
                    a = false
                }
            } else {
                if (vm.percent > 0) {
                    vm.percent--
                } else {
                    a = true
                }
            }
        }, 100)
    </script>
    <style>
        .handerx {
            width: 20px;
            height: 20px;
            position: absolute;
            color: #fff;
            background: #000;
        }

        .sliderx {
            width: 100%;
            height: 20px;
            position: relative;
        }

        .body {
            padding: 40px;
        }
    </style>
</head>
<body>
    <div ms-controller="test" class="body">
        <div class="slider" style="background: red;">
            <div class="handerx" ms-css="{left: @percent+'%'}">{{ @percent+'%' }}</div>
            <div style="background: greenyellow; height: 20px" ms-css="{width:@percent+'%'}"></div>
        </div>
        <div class="sliderx" style="background: #d2d2d2;">
            <div style="background: #2FECDC; height: 20px" ms-css="{width:100-@percent+'%'}"></div>
        </div>
    </div>
</body>
</html>
